<html>
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">

        <title>开始使用 ZRender</title>

        <link rel="stylesheet" href="https://ecomfe.github.io/zrender-doc/public/lib/css/bootstrap.min.css">

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
        <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
        <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

        <link rel="stylesheet" href="https://ecomfe.github.io/zrender-doc/public/css/main.css">
    </head>

    <body>
        <nav id="nav" class="navbar navbar-default">
            <div class="container">
                <ul class="nav navbar-nav">
                    <li>
                        <a href="https://ecomfe.github.io/zrender-doc/public/" class="navbar-logo">
                            <img class="navbar-logo-img" src="https://ecomfe.github.io/zrender-doc/public/img/logo.png">
                            <div class="navbar-logo-text">ZRender</div>
                        </a>
                    </li>
                </ul>

                <ul class="nav navbar-nav navbar-right">
                    <li class="active">
                        <a href="https://ecomfe.github.io/zrender-doc/public/">首页</a>
                    </li>
                    <li >
                        <a href="https://ecomfe.github.io/zrender-doc/public/api.html">文档</a>
                    </li>
                    <li >
                        <a href="https://ecomfe.github.io/zrender-doc/public/examples.html">实例</a>
                    </li>
                    <li>
                        <a href="http://echarts.baidu.com/">ECharts</a>
                    </li>
                </ul>
            </div>
        </nav>


<div class="container container-top">
    <h1>开始使用 ZRender</h1>
    <p><a class="github-button" href="https://github.com/ecomfe/zrender" data-icon="octicon-star" data-show-count="true" aria-label="Star ecomfe/zrender on GitHub">
    Star
</a></p>

<p><a href="https://github.com/ecomfe/zrender">ZRender</a> 是二维绘图引擎，它提供 Canvas、SVG、VML 等多种渲染方式。ZRender 也是 <a href="http://echarts.baidu.com/">ECharts</a> 的渲染器。</p>

<h2 id="下载-zrender">下载 ZRender</h2>

<p>ZRender 项目在 GitHub 上的地址是：<a href="https://github.com/ecomfe/zrender">https://github.com/ecomfe/zrender</a>。也可以使用 <code class="highlighter-rouge">npm install zrender</code> 下载。</p>

<p>在 <code class="highlighter-rouge">dist</code> 目录下找到 <code class="highlighter-rouge">zrender.js</code> 和 <code class="highlighter-rouge">zrender.min.js</code>，前者是开发版，后者是发布版。</p>

<h2 id="引入-zrender">引入 ZRender</h2>

<p>在使用 ZRender 前，需要在 HTML 中加载对应 JavaScript 文件：</p>

<div class="language-html highlighter-rouge"><pre class="highlight"><code><span class="nt">&lt;script </span><span class="na">src=</span><span class="s">"./dist/zrender.js"</span><span class="nt">&gt;&lt;/script&gt;</span>
</code></pre>
</div>

<h2 id="初始化-zrender">初始化 ZRender</h2>

<p>在使用 ZRender 前需要初始化实例，具体方式是传入一个 DOM 容器：</p>

<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">zr</span> <span class="o">=</span> <span class="nx">zrender</span><span class="p">.</span><span class="nx">init</span><span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">'main'</span><span class="p">));</span>
</code></pre>
</div>

<p>创建出的这个实例对应文档中 <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrender-instance-api">zrender 实例</a>部分的方法和属性。</p>

<h2 id="在场景中添加元素">在场景中添加元素</h2>

<p>ZRender 提供了将近 20 种图形类型，可以在文档 <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderdisplayable">zrender.Displayable</a> 下找到。如果想创建其他图形，也可以通过 <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderpathextendprops">zrender.Path.extend</a> 进行扩展。</p>

<p>以创建一个圆为例：</p>

<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">circle</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">zrender</span><span class="p">.</span><span class="nx">Circle</span><span class="p">({</span>
    <span class="na">shape</span><span class="p">:</span> <span class="p">{</span>
        <span class="na">cx</span><span class="p">:</span> <span class="mi">150</span><span class="p">,</span>
        <span class="na">cy</span><span class="p">:</span> <span class="mi">50</span><span class="p">,</span>
        <span class="na">r</span><span class="p">:</span> <span class="mi">40</span>
    <span class="p">},</span>
    <span class="na">style</span><span class="p">:</span> <span class="p">{</span>
        <span class="na">fill</span><span class="p">:</span> <span class="s1">'none'</span><span class="p">,</span>
        <span class="na">stroke</span><span class="p">:</span> <span class="s1">'#F00'</span>
    <span class="p">}</span>
<span class="p">});</span>
<span class="nx">zr</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">circle</span><span class="p">);</span>
</code></pre>
</div>

<p>创建了一个圆心在 <code class="highlighter-rouge">[150, 50]</code> 位置，半径为 <code class="highlighter-rouge">40</code> 像素的圆，并将其添加到画布中。</p>

<h2 id="修改图形元素属性">修改图形元素属性</h2>

<p>通过 <code class="highlighter-rouge">a = new zrender.XXX</code> 方法创建了图形元素之后，可以用 <code class="highlighter-rouge">a.shape</code> 等形式获取到创建时输入的属性，但是如果需要对其进行修改，应该使用 <a href="https://ecomfe.github.io/zrender-doc/public/api.html#zrenderelementattrkey-value"><code class="highlighter-rouge">a.attr(key, value)</code></a> 的形式修改，否则不会触发图形的重绘。例子：</p>

<div class="language-js highlighter-rouge"><pre class="highlight"><code><span class="kd">var</span> <span class="nx">circle</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">zrender</span><span class="p">.</span><span class="nx">Circle</span><span class="p">({</span>
    <span class="na">shape</span><span class="p">:</span> <span class="p">{</span>
        <span class="na">cx</span><span class="p">:</span> <span class="mi">150</span><span class="p">,</span>
        <span class="na">cy</span><span class="p">:</span> <span class="mi">50</span><span class="p">,</span>
        <span class="na">r</span><span class="p">:</span> <span class="mi">40</span>
    <span class="p">}</span>
<span class="p">});</span>
<span class="nx">zr</span><span class="p">.</span><span class="nx">add</span><span class="p">(</span><span class="nx">circle</span><span class="p">);</span>

<span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="nx">circle</span><span class="p">.</span><span class="nx">shape</span><span class="p">.</span><span class="nx">r</span><span class="p">);</span> <span class="c1">// 40</span>
<span class="nx">circle</span><span class="p">.</span><span class="nx">attr</span><span class="p">(</span><span class="s1">'shape'</span><span class="p">,</span> <span class="p">{</span>
    <span class="na">r</span><span class="p">:</span> <span class="mi">50</span> <span class="c1">// 只更新 r。cx、cy 将保持不变。</span>
<span class="p">});</span>
</code></pre>
</div>

<p>请参考<a href="https://ecomfe.github.io/zrender-doc/public/api.html">文档</a>了解更多。</p>

<script async="" defer="" src="https://buttons.github.io/buttons.js"></script>


</div>

        <script src="https://ecomfe.github.io/zrender-doc/public/lib/js/jquery.min.js"></script>
        <script src="https://ecomfe.github.io/zrender-doc/public/lib/js/bootstrap.min.js"></script>

        <script>
            var _hmt = _hmt || [];
            (function() {
            var hm = document.createElement("script");
            hm.src = "//hm.baidu.com/hm.js?4bad1df23f079e0d12bdbef5e65b072f";
            var s = document.getElementsByTagName("script")[0];
            s.parentNode.insertBefore(hm, s);
            })();

            $(window).scroll(function () {
                if ($(window).scrollTop() === 0) {
                    // Is top
                    $('#nav').removeClass('shadowed');
                }
                else {
                    // Is not top
                    $('#nav').addClass('shadowed');
                }
            });
        </script>
    </body>
</html>

